<template>
  <div class="job-recommendations">
    <header>
      <div class="header-content">
        <h1>职为你来</h1>
        <p>发现适合你的热门职位</p>
      </div>
    </header>

    <main>
      <!-- 筛选器 -->
      <div class="filter-section">
        <div class="filter-form">
          <div class="filter-item">
            <label for="companySize">公司规模</label>
            <select
              id="companySize"
              v-model="filters.companySize"
              @change="applyFilters"
            >
              <option value="">不限</option>
              <option value="small">小型公司 (&lt;50人)</option>
              <option value="medium">中型公司 (50-500人)</option>
              <option value="large">大型公司 (&gt;500人)</option>
            </select>
          </div>
          <div class="filter-item">
            <label for="industry">行业</label>
            <select
              id="industry"
              v-model="filters.industry"
              @change="applyFilters"
            >
              <option value="">不限</option>
              <option value="tech">科技</option>
              <option value="finance">金融</option>
              <option value="education">教育</option>
              <option value="healthcare">医疗</option>
            </select>
          </div>
          <div class="filter-item">
            <label for="experience">经验要求</label>
            <select
              id="experience"
              v-model="filters.experience"
              @change="applyFilters"
            >
              <option value="">不限</option>
              <option value="entry">应届生</option>
              <option value="junior">1-3年</option>
              <option value="mid">3-5年</option>
              <option value="senior">5年以上</option>
            </select>
          </div>
          <div class="filter-item">
            <label for="education">学历要求</label>
            <select
              id="education"
              v-model="filters.education"
              @change="applyFilters"
            >
              <option value="">不限</option>
              <option value="highschool">高中</option>
              <option value="bachelor">本科</option>
              <option value="master">硕士</option>
              <option value="phd">博士</option>
            </select>
          </div>
          <div class="filter-item">
            <label for="salary">薪资范围</label>
            <select id="salary" v-model="filters.salary" @change="applyFilters">
              <option value="">不限</option>
              <option value="0-5k">5k以下</option>
              <option value="5k-10k">5k-10k</option>
              <option value="10k-20k">10k-20k</option>
              <option value="20k-50k">20k-50k</option>
              <option value="50k+">50k以上</option>
            </select>
          </div>
        </div>
      </div>

      <div class="content-wrapper">
        <!-- 职位详情 -->
        <div class="job-details" v-if="selectedJob">
          <div class="job-header">
            <h2>{{ selectedJob.title }}</h2>
            <button class="apply-button">申请职位</button>
          </div>
          <div class="publisher-info">
            <img
              :src="selectedJob.publisher.avatar"
              :alt="selectedJob.publisher.name"
              class="publisher-avatar"
            />
            <div class="publisher-details">
              <h3>{{ selectedJob.publisher.name }}</h3>
              <p>{{ selectedJob.publisher.title }}</p>
            </div>
          </div>
          <div class="company-info">
            <h3>{{ selectedJob.company }}</h3>
            <p>
              <i class="icon-building"></i
              >{{ getCompanySize(selectedJob.companySize) }}
            </p>
            <p><i class="icon-briefcase"></i>{{ selectedJob.industry }}</p>
          </div>
          <div class="job-info">
            <p>
              <i class="icon-location"></i>工作地点：{{ selectedJob.location }}
            </p>
            <p><i class="icon-money"></i>薪资范围：{{ selectedJob.salary }}</p>
            <p>
              <i class="icon-user"></i>经验要求：{{ selectedJob.experience }}
            </p>
            <p>
              <i class="icon-graduation-cap"></i>学历要求：{{
                selectedJob.education
              }}
            </p>
          </div>
          <div class="job-description">
            <h4>职位描述</h4>
            <p>{{ selectedJob.description }}</p>
          </div>
        </div>

        <!-- 职位列表 -->
        <div class="job-list">
          <div
            v-for="job in filteredJobs"
            :key="job.id"
            class="job-card"
            @click="selectJob(job)"
          >
            <h3>{{ job.title }}</h3>
            <p class="company">{{ job.company }}</p>
            <div class="job-tags">
              <span class="job-tag" v-for="tag in job.tags" :key="tag">{{
                tag
              }}</span>
            </div>
            <div class="job-brief">
              <span><i class="icon-location"></i>{{ job.location }}</span>
              <span><i class="icon-money"></i>{{ job.salary }}</span>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const filters = ref({
  companySize: '',
  industry: '',
  experience: '',
  education: '',
  salary: ''
})

const jobs = ref([
  {
    id: 1,
    title: '前端开发工程师',
    company: '科技创新有限公司',
    location: '北京',
    experience: '1-3年',
    education: '本科',
    salary: '15k-25k',
    description:
      '负责公司产品的前端开发，使用Vue.js和React等现代前端框架。我们正在寻找一位热情的前端开发工程师加入我们的团队。你将参与开发创新的Web应用，与设计师和后端工程师紧密合作，打造出色的用户体验。\n\n主要职责：\n- 使用HTML、CSS和JavaScript开发响应式网页\n- 使用Vue.js或React等现代前端框架构建单页应用\n- 与后端开发人员协作，集成RESTful API\n- 优化应用性能，确保跨浏览器兼容性\n- 参与代码审查，维护高质量的代码库\n\n要求：\n- 计算机科学或相关领域的学士学位\n- 至少1-3年的前端开发经验\n- 精通HTML、CSS和JavaScript\n- 熟悉Vue.js或React框架\n- 了解前端构建工具如Webpack、Babel等\n- 良好的问题解决能力和团队协作精神\n\n加入我们，你将获得：\n- 有竞争力的薪资和福利待遇\n- 灵活的工作时间和地点\n- 持续学习和成长的机会\n- 参与创新项目的激动人心的经历',
    companySize: 'medium',
    industry: 'tech',
    tags: ['前端开发', 'Vue.js', 'React'],
    publisher: {
      name: '张三',
      title: '技术总监',
      avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
    }
  },
  {
    id: 2,
    title: '数据分析师',
    company: '金融科技股份公司',
    location: '上海',
    experience: '3-5年',
    education: '硕士',
    salary: '20k-35k',
    description:
      '负责公司大数据分析，使用Python和机器学习算法进行数据挖掘。我们正在寻找一位经验丰富的数据分析师，帮助我们从海量数据中提取有价值的洞察。你将在一个充满活力的团队中工作，运用先进的分析技术解决复杂的商业问题。\n\n主要职责：\n- 收集、处理和分析大规模数据集\n- 使用统计方法和机器学习算法建立预测模型\n- 开发数据可视化工具，帮助非技术人员理解数据洞察\n- 与业务团队合作，提供数据驱动的决策支持\n- 持续优化数据收集和分析流程\n\n要求：\n- 统计学、数学、计算机科学或相关领域的硕士学位\n- 3-5年的数据分析或数据科学工作经验\n- 精通Python，熟悉数据分析库如Pandas、NumPy等\n- 熟悉机器学习算法和工具，如Scikit-learn、TensorFlow等\n- 具备SQL和数据库知识\n- 优秀的问题解决能力和沟通技巧\n\n我们提供：\n- 具有竞争力的薪酬package\n- 职业发展和进修机会\n- 灵活的工作安排\n- 参与前沿金融科技项目的机会',
    companySize: 'large',
    industry: 'finance',
    tags: ['数据分析', 'Python', '机器学习'],
    publisher: {
      name: '李四',
      title: '数据科学主管',
      avatar: 'https://randomuser.me/api/portraits/women/2.jpg'
    }
  },
  {
    id: 3,
    title: '产品经理',
    company: '教育科技有限公司',
    location: '广州',
    experience: '5年以上',
    education: '本科',
    salary: '25k-40k',
    description:
      '负责公司在线教育产品的规划和管理，推动产品的持续优化和创新。我们正在寻找一位有经验的产品经理，领导我们的在线教育平台的发展。你将负责产品的整个生命周期，从概念到发布，再到持续改进。\n\n主要职责：\n- 制定产品策略和路线图，确定产品功能优先级\n- 进行市场研究，了解用户需求和行业趋势\n- 编写详细的产品需求文档（PRD）\n- 与设计和开发团队密切合作，确保产品vision的实现\n- 分析产品数据，持续优化用户体验\n- 协调跨部门资源，推动产品按时交付\n\n要求：\n- 本科及以上学历，计算机科学、工商管理或相关领域优先\n- 5年以上产品管理经验，教育科技行业经验优先\n- 出色的分析能力和数据驱动决策能力\n- 优秀的沟通和领导能力，能够有效管理利益相关者\n- 对教育行业有深入的了解和热情\n\n我们提供：\n- 有竞争力的薪酬和年终奖\n- 职业发展和管理晋升机会\n- 弹性工作时间\n- 参与塑造未来教育的机会',
    companySize: 'small',
    industry: 'education',
    tags: ['产品管理', '在线教育', 'B2C'],
    publisher: {
      name: '王五',
      title: '产品副总裁',
      avatar: 'https://randomuser.me/api/portraits/men/3.jpg'
    }
  },
  {
    id: 4,
    title: '人工智能研究员',
    company: '未来科技研究院',
    location: '深圳',
    experience: '3-5年',
    education: '博士',
    salary: '30k-50k',
    description:
      '从事前沿人工智能技术研究，包括但不限于机器学习、自然语言处理和计算机视觉。我们正在寻找一位富有创造力的人工智能研究员，加入我们的尖端研究团队。你将有机会推动AI技术的边界，解决复杂的实际问题。\n\n主要职责：\n- 设计和实施创新的机器学习算法\n- 进行深度学习模型的研究和优化\n- 开发自然语言处理和计算机视觉的新技术\n- 撰写研究论文并在顶级会议和期刊上发表\n- 与工程团队合作，将研究成果转化为实际应用\n\n要求：\n- 计算机科学、人工智能或相关领域的博士学位\n- 3-5年的AI研究或工作经验\n- 在机器学习、NLP或计算机视觉领域有深入的知识\n- 熟练使用Python和深度学习框架如PyTorch或TensorFlow\n- 优秀的问题解决能力和创新思维\n- 良好的英语写作和交流能力\n\n我们提供：\n- 具有国际竞争力的薪酬待遇\n- 先进的研究设备和计算资源\n- 与全球顶尖AI研究者合作的机会\n- 灵活的工作时间和充足的研究自由度\n- 参与塑造AI未来的激动人心的机会',
    companySize: 'medium',
    industry: 'tech',
    tags: ['人工智能', '机器学习', 'NLP'],
    publisher: {
      name: '赵六',
      title: 'AI研究主管',

      avatar: 'https://randomuser.me/api/portraits/women/4.jpg'
    }
  },
  {
    id: 5,
    title: '医疗器械工程师',
    company: '健康科技有限公司',
    location: '杭州',
    experience: '5年以上',
    education: '硕士',
    salary: '20k-35k',
    description:
      '负责医疗器械的研发和改进，确保产品符合相关法规和质量标准。我们正在寻找一位经验丰富的医疗器械工程师，加入我们的创新团队。你将参与开发能够改善患者生活质量的尖端医疗设备。\n\n主要职责：\n- 设计和开发创新的医疗器械产品\n- 进行产品测试和验证，确保符合行业标准和法规要求\n- 编写技术文档，包括设计规范和测试报告\n- 与跨职能团队合作，包括临床、质量和生产部门\n- 持续改进现有产品，提高性能和可靠性\n\n要求：\n- 生物医学工程、机械工程或相关领域的硕士学位\n- 5年以上医疗器械行业的工作经验\n- 熟悉医疗器械法规，如FDA和CE标准\n- 具备强大的问题解决能力和创新思维\n- 优秀的项目管理能力\n- 良好的沟通技巧，能够与不同背景的团队成员合作\n\n我们提供：\n- 有竞争力的薪酬和全面的福利待遇\n- 职业发展和继续教育的机会\n- 灵活的工作时间\n- 参与开发可能改变生命的医疗技术的机会',
    companySize: 'large',
    industry: 'healthcare',
    tags: ['医疗器械', '研发', 'FDA'],
    publisher: {
      name: '孙七',
      title: '研发总监',
      avatar: 'https://randomuser.me/api/portraits/men/5.jpg'
    }
  }
])

const filteredJobs = computed(() => {
  return jobs.value.filter((job) => {
    return (
      (!filters.value.companySize ||
        job.companySize === filters.value.companySize) &&
      (!filters.value.industry || job.industry === filters.value.industry) &&
      (!filters.value.experience ||
        job.experience.includes(filters.value.experience)) &&
      (!filters.value.education ||
        job.education.includes(filters.value.education)) &&
      (!filters.value.salary || job.salary.includes(filters.value.salary))
    )
  })
})

const selectedJob = ref(jobs.value[0])

const selectJob = (job) => {
  selectedJob.value = job
}

const getCompanySize = (size) => {
  const sizes = {
    small: '小型公司 (<50人)',
    medium: '中型公司 (50-500人)',
    large: '大型公司 (>500人)'
  }
  return sizes[size] || '未知规模'
}

const applyFilters = () => {
  // 这里可以添加额外的筛选逻辑，如果需要的话
  console.log('Filters applied:', filters.value)
}
</script>

<style scoped>
.job-recommendations {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-image: linear-gradient(to bottom, #f1f6f8 0%, #eaf2f5 53%);
  min-height: 100vh;
  color: #333;
}

header {
  background-color: #409eff;
  padding: 0.5rem 0;
  color: white;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

header p {
  font-size: 1.2rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}

main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.filter-section {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-item {
  flex: 1;
  min-width: 200px;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #4a5568;
}

select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background-color: white;
  font-size: 1rem;
}

.content-wrapper {
  display: flex;
  gap: 2rem;
}

.job-details {
  flex: 2;
  background-color: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.job-header h2 {
  font-size: 1.8rem;
  color: #409eff;
  margin: 0;
}

.apply-button {
  background-color: #50b9f6;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.apply-button:hover {
  background-color: #0680fa;
}

.publisher-info {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.publisher-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 1rem;
}

.publisher-details h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #1e40af;
}

.publisher-details p {
  margin: 0;
  color: #4b5563;
}

.company-info h3 {
  font-size: 1.4rem;
  color: #3b82f6;
  margin: 0 0 1rem 0;
}

.company-info p,
.job-info p {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
  color: #4b5563;
}

.job-description h4 {
  font-size: 1.2rem;
  color: #1e40af;
  margin: 1.5rem 0 1rem 0;
}

.job-description p {
  color: #4b5563;
  line-height: 1.6;
  white-space: pre-line;
}

.job-list {
  flex: 1;
  max-width: 400px;
}

.job-card {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.job-card h3 {
  font-size: 1.2rem;
  color: #1e40af;
  margin: 0 0 0.5rem 0;
}

.company {
  color: #3b82f6;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.job-tag {
  background-color: #e0f2fe;
  color: #0369a1;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.job-brief {
  display: flex;
  justify-content: space-between;
  color: #4b5563;
  font-size: 0.8rem;
}

.icon-building,
.icon-briefcase,
.icon-location,
.icon-money,
.icon-user,
.icon-graduation-cap {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-building {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'/%3E%3C/svg%3E");
}
.icon-briefcase {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}
.icon-location {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}
.icon-money {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}
.icon-user {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}
.icon-graduation-cap {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath d='M12 14l9-5-9-5-9 5 9 5z'/%3E%3Cpath d='M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .job-list,
  .job-details {
    max-width: 100%;
  }
}
</style>
